<template>
	<view>
		<view>
			<text>用户头像</text>
			<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
				@progress="progress" @success="success" :auto-upload="false" @fail="fail" :limit="1" ref="files" />
		</view>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
			<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.name" border="none"></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="userInfo.gender" borderBottom @click="showSex = true" ref="item1">
				<u--input v-model="model1.userInfo.gender" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item label="年龄" prop="userInfo.age" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.age" border="none"></u--input>
			</u-form-item>
			<u-form-item label="邮箱" prop="userInfo.email" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.email" border="none"></u--input>
			</u-form-item>

		</u--form>
		<u-button @click="addUser" type="primary" text="确定"></u-button>
		<u-list>
			<u-list-item v-for="(item, index) in userList" :key="item._id">
				<u-cell :title="item.name">
					<template #icon>
						<u-avatar shape="square" size="35" :src="item.imageUrl"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
					</template>
				</u-cell>
			</u-list-item>
		</u-list>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue: [],
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						gender: '',
						age: null,
						email: '',
						imageUrl: ''
					},
				},
				userList: [],
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: 'blur'
					},
					'userInfo.gender': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.age': {
						type: 'number',
						required: true,
						message: '请填写年龄',
						trigger: 'blur'
					},
					'userInfo.email': {
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: 'blur'
					},
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				
				console.log('上传成功', e.tempFilePaths[0])
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},

			getUserList() {
				uniCloud.callFunction({
					name: 'getUser'
				}).then(res => {
					this.userList = res.result.data
				})
			},
			sexSelect(e) {
				this.model1.userInfo.gender = e.name
				this.$refs.form1.validateField('userInfo.gender')
			},
			 addUser() {
				this.$refs.form1.validate().then(res => {
					this.$refs.files.upload().then(res=>{
					this.model1.userInfo.imageUrl = res[0].url
						uniCloud.callFunction({
							name: 'addUser',
							data: this.model1.userInfo
						}).then(res => {
							this.getUserList()
							console.log(res)
						})
					})
					
				})
			},
				
		},
		onLoad() {
			this.getUserList()
		}
	}
</script>

<style lang="scss">

</style>